<template>
    <div class="baobei">
        <div v-for="baobeis in list" :key="baobeis.id">
            <img :src="baobeis.imgsrc" alt="">
            <div class="text">{{baobeis.text}}</div>
            <span class="dijia">{{baobeis.dijia}}</span>
            <div class="money">{{baobeis.money}}</div>
            <div class="qita">
                <span class="ziying">{{baobeis.ziying}}</span>
                <span class="pinglun">{{baobeis.pinglun}}</span>
                <span class="xiangshi">{{baobeis.xiangshi}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "BaoBeiList",
    data() {
        return {
            list: [{ id: 1, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 2, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 3, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 4, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 5, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 6, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 7, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" },{ id: 8, imgsrc: "//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/170364/35/31024/112559/6347dd7dE3d956dd7/b2549b9f645334ad.jpg!q70.dpg.webp", text: "松下（Panasonic）家用无线洗地机 LED拖洗一体电动拖把家用手持吸尘器MC-X22W", dijia: "90天最低价", money: "￥2799.00", ziying: "自营", pinglun: "500+评论", xiangshi: "看相似" }]
        }
    },
}
</script>
<style lang="less">
.baobei {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    div {
        width: 178px;
        height: 315px;
        margin: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 10px;
        img {
            width: 172px;
            height: 172px;
        }
        .text{
        font-size: 14px;
        }
        .dijia{
            font-size: 14px;
            background-color: pink;
        }
        .money{
            font-size: 16px;
            color: red;
        }
        .qita{
            flex-direction: row;
            justify-content: space-between;
            font-size: 12px;
            .ziying{
                color: white;
                background-color: red;
            }
            .pinglun{
                color: gray;
            }
            .xiangshi{
                background-color: grey;
                padding: 2px 4px;
                border-radius: 6px;
            }
        }
    }
}
</style>